@include('header')

@if(!$data)
	@include('empty_data')
@else
	<link rel="stylesheet" href="{{asset('js/dropload/dist/dropload.css')}}">

	<script type="text/javascript">
        //根据屏幕尺寸改变字体大小 按照750的尺寸
        (function(win) {
            var doc = win.document;
            var docEl = doc.documentElement;
            var tid;

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                var rem = width / 4.5;
                docEl.style.fontSize = rem + 'px';
            }

            win.addEventListener('resize', function() {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }, false);
            win.addEventListener('pageshow', function(e) {
                if (e.persisted) {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);

            refreshRem();
        })(window);
	</script>
	<div class="wrapper">
		@foreach($data as $k=>$v)
			@php
				$v->content = json_decode($v->content);
				if($v->type == 'RC:ReadNtf'){
					$start=0;
				}
			@endphp
		<ul class="@if($uid == $v->from_uid)  ulLeft @else ulRight @endif">
			<li>

					@php if($start==0){  $start=1; @endphp
					<div class="timeWrap">
						<div class="time">{{$v->created_at}}</div>
					</div>
				    @php } @endphp
				<div class="user">
					@if($uid == $v->from_uid)
						<img class="headimg" src="{{$v->to_avatar}}">
						<span class="userName">{{$v->to_realname}}</span>

					@else
						<span class="userName">{{$v->to_realname}}</span>
						<img class="headimg"  src="{{$v->to_avatar}}">
					@endif
				</div>
				@if($uid == $v->from_uid)
				<div class="ltLeft">

						<div class="left_triangle"></div>

					@if($v->type == 'RC:TxtMsg')
					<span>{{$v->content->content}}</span>
					@elseif($v->type == 'RC:ImgMsg')
						<img src="{{$v->content->imageUri}}" width="100%" />
					@elseif($v->type == 'RC:VcMsg')
						<a href="javascript:void(0)" onclick="native('{{$v->id}}','{{$v->content->content}}')">{{$v->content->duration}}＂ (语音消息)</a>
					@elseif($v->type == 'RC:ImgTextMsg')
						<span>{{$v->content->title}}</span>
						<span>{{$v->content->content}}</span>>
						<img src="{{$v->content->imageUri}}" width="90%" />
					@elseif($v->type == 'RC:LBSMsg')
						<img src="data:image/png;base64,{{($v->content->content)}}" width="100%" /><br />
						{{$v->content->poi}}
					@endif
				</div>
				@else
					<div class="ltRight">
						<div class="right_triangle"></div>
						@if($v->type == 'RC:TxtMsg')
							<span>{{$v->content->content}}</span>
						@elseif($v->type == 'RC:ImgMsg')
							<img src="{{$v->content->imageUri}}" width="100%" />
						@elseif($v->type == 'RC:VcMsg')
                            <a href="javascript:void(0)" onclick="native('{{$v->id}} ','{{$v->content->content}}')">{{$v->content->duration}}＂ (语音消息)</a>
						@elseif($v->type == 'RC:ImgTextMsg')
							<span>{{$v->content->title}}</span>
							<span>{{$v->content->content}}</span>>
							<img src="{{$v->content->imageUri}}" width="90%" />
						@elseif($v->type == 'RC:LBSMsg')
							<img src="data:image/png;base64,{{($v->content->content)}}" width="100%" /><br />
							{{$v->content->poi}}
						@endif
					</div>
				@endif
			</li>
		</ul>
		@endforeach
		<input type="hidden" id="uid" value="{{$uid}}">
		<input type="hidden" id="to_uid" value="{{$to_uid}}">
	</div>
@endif
<style type="text/css">
	html,body{width: 100%;height: 100%;background: #f9f9f9;}
	html, body, img {  border: 0;  }
	*{  margin: 0;  padding: 0;  }
	body {  font-size: 12px;  min-width: 320px;  font-family: "\5FAE\8F6F\96C5\9ED1";  font-weight: 400;  line-height: 1.5;  }
	a, a:hover {  text-decoration: none;  }
	ul, li {  list-style: none;  }
	html * {  -webkit-tap-highlight-color: rgba(0,0,0,0);  -moz-tap-highlight-color: rgba(0,0,0,0);  -o-tap-highlight-color: rgba(0,0,0,0);  -ms-tap-highlight-color: rgba(0,0,0,0);  tap-highlight-color: rgba(0,0,0,0);  }
	.wrapper{padding: .23rem .18rem 0 .18rem;}
	.timeWrap{text-align: center;}
	.time{padding:0 10px;display:inline-block;height: .22rem;border-radius: 5px;background: #e5e5e5;color: #a7a7a7;text-align: center;line-height: .22rem;margin: 0 auto;}
	.ltLeft{background-color: #fff;  float: left;  margin-left: .7rem;  max-width: 2.5rem;  padding: 10px;  border-radius: 7px;}
	.ltRight{  float: right;  background-color: #7eceef;  margin: .1rem .6rem 0 0;  padding: 10px 0px 10px 10px;  border-radius: 7px;  color: #fff;  max-width: 2.5rem; min-width: 2rem;}
	.left_triangle {  float: left;  height: 0px;  width: 0px;  border-width: 8px;  border-style: solid;  border-color: transparent #fff transparent transparent;  position: relative;  left: -16px;  top: 3px;  }
	.right_triangle {  float: right;  height: 0px;  width: 0px; border-width: 8px;  border-style: solid;  border-color: transparent transparent transparent #7eceef;  position: relative;  right: -16px;  top: 3px;  }
	.wrapper ul .headimg{width: .5rem;height: .5rem;border-radius: 50%;vertical-align: middle;position: relative;top: .2rem;}
	.wrapper ul li{margin-top: .3rem;overflow: hidden;}
	.userName{position:relative;top:.1rem;color: #000;}
	.ulRight .user{float: right;width: 1.5rem;text-align: right;}
    .ltLeft img {border-radius:0;position:inherit;    max-width: 60%;  height: auto;}
</style>
<script src="{{asset('js/zepto.min.js')}}"></script>
<script src="{{asset('js/dropload/dist/dropload.min.js')}}"></script>
<script>
    function native(id,date){
        try{
            complaintVcClick(id,date);
        }catch(e){
            window.Android.complaintVcClick(id,date);
        }
    }

</script>
<script>
    $(function(){
        // 页数
        var page = 1;
        // 每页展示10个
        var size = 10;

        // dropload
        $('.wrapper').dropload({
            scrollArea : window,
            domUp : {
                domClass   : 'dropload-up',
                domRefresh : '<div class="dropload-refresh">↓下拉加载更多</div>',
                domUpdate  : '<div class="dropload-update">↓下拉加载更多</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData  : '<div class="dropload-noData">暂无数据</div>'
            },
            loadUpFn : function(me){
                page++;
                // 拼接HTML
                var result = '';
                var uid=$('#uid').val();
                var to_uid=$('#to_uid').val();
                $.ajax({
                    type: 'POST',
                    url: '/webview/rongcloud_history?uid='+uid+'&to_uid='+to_uid+'page='+page+'&size='+size,
                    data:{page:page},
                    dataType: 'json',
                    success: function(data){

                        var arrLen = Object.keys(data.data).length;
                        if(arrLen > 0){
                            for(var i=arrLen-1;i>=0;i--){
                                var object = data.data[i];
                                if(isJSON(object.content)) {
                                    var content = JSON.parse(object.content);
                                }else{
                                    continue;
                                }
                                var status =0 ;
                                if (object.type=='RC:ReadNtf'){
                                    status = 1;
                                }
                                if(object.from_uid == uid) {
                                    result += '<ul class="ulLeft">'
                                         +'<li>';
                                    if(status==0){
                                        status=1;
                                        result+='<div class="timeWrap">' +
                                            '<div class="time">'+object.created_at+'</div>' +
                                            '</div>';
                                    }
                                    result +='<div class="user">' +
                                        '<img class="headimg" src="'+object.to_avatar+'">' +
                                        '<span class="userName">'+object.to_realname+'</span>' +
                                        '</div>';

                                    result += '<div class="ltLeft">'
                                            + '<div class="left_triangle"></div>';
                                    if(object.type == 'RC:TxtMsg'){
                                        if(typeof(content.content)!='undefined') {
                                            result += '<span>' + content.content + '</span>';
                                        }
                                    }else if(object.type == 'RC:ImgMsg' ){
                                        result += ' <img src="'+content.imageUri+'" width="100%" />';
                                    }else if(object.type == 'RC:VcMsg'){
                                        var cont= "'"+content.content+"'";
                                        result += ' <a href="javascript:void(0)" onclick="native('+object.id+','+cont+')">'+content.duration+'＂ (语音消息)</a> ';
                                    }else if(object.type == 'RC:ImgTextMsg'){
                                        result += '<span>'+content.title+'</span>';
                                        result += '<span>'+content.content+'</span>>';
                                        result += '<img src="'+content.imageUri+'" width="90%" />';

                                    }else if(object.type == 'RC:LBSMsg'){
                                        result += '<img src="data:image/png;base64,'+content.content+'" width="100%" /><br />';
                                        result += '<span>'+content.poi+'</span>';
                                    }
                                    result += '</div></li></ul>';

                                }else{

                                    result += '<ul class="ulRight">'
                                        +'<li>';
                                    if(status==0){
                                        status=1;
                                        result+='<div class="timeWrap">' +
                                            '<div class="time">'+object.created_at+'</div>' +
                                            '</div>';
                                    }
                                    result +='<div class="user">' +
                                        '<span class="userName">'+object.to_realname+'</span>' +
                                        '<img class="headimg" src="'+object.to_avatar+'">' +
                                        '</div>';

                                    result += '<div class="ltRight">'
                                        + '<div class="right_triangle"></div>';
                                    if(object.type == 'RC:TxtMsg'){
                                        result += '<span>'+content.content+'</span>';
                                    }else if(object.type == 'RC:ImgMsg' ){
                                        result += ' <img src="'+content.imageUri+'" width="100%" />';
                                    }else if(object.type == 'RC:VcMsg'){
                                        var cont= "'"+content.content+"'";
                                        result += ' <a href="javascript:void(0)" onclick="native('+object.id+','+cont+')">'+content.duration+'＂ (语音消息)</a>';
                                    }else if(object.type == 'RC:ImgTextMsg'){
                                        result += '<span>'+content.title+'</span>';
                                        result += '<span>'+content.content+'</span>>';
                                        result += '<img src="'+content.imageUri+'" width="90%" />';

                                    }else if(object.type == 'RC:LBSMsg'){
                                        result += '<img src="data:image/png;base64,'+content.content+'" width="100%" /><br />';
                                        result += '<span>'+content.poi+'</span>';
                                    }
                                    result += '</div></li></ul>'
                                }
                                object=null;
                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('.wrapper').prepend(result);
                            // 每次数据插入，必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            threshold : 50
        });
    });
    function isJSON(str) {
        if (typeof str == 'string') {
            try {
                JSON.parse(str);
                return true;
            } catch(e) {
                console.log(e);
                return false;
            }
        }
        console.log('It is not a string!')
    }
</script>